<template>
	<view class="" name='baoike'>
		<view class="topss">
			<view class="liubai">

			</view>
			<view class="baiketitle">
				分类
			</view>
		</view>

		<view class="flex-row group">
			<view class="flex-col  section_10">
				<view class="items-center" style="height: 2.88rem;" @click="typeItem(item.id,item.name)"
					v-for="(item, index) in typelist" :key="index">
					<view :class="typeIndex== item.id?'section_11':''">
						<!--*-->
					</view>
					<text :class="typeIndex== item.id?'text_23':'text_3'">{{item.name}}</text>
				</view>
			</view>
			<view class="flex-col section_3">
				<scroll-view style="height: 75vh;" scroll-y="true">
					<view class=" group_3" style="">
						<view class="section_6" @click="onClickView_19(item.id, item.name)"
							v-for="(item, index) in list" :key="index">
							<image style="width:120rpx;height: 120rpx;"
								:src="item.ossUrl"
								mode="aspectFill"></image>
							<view style="width: 100%;">
								<text class="text_14">{{item.name}}</text>
								<!-- <text class="text_15">￥{{item.pid}}</text> -->
							</view>

						</view>
						<view v-if="list.length == 0" style="width: 100%;">
							<view class="" style="text-align: center;">
						  <image src="../../static/dingdan.png" mode="scaleToFill"
									style="margin-top: 100rpx;width: 150rpx;height: 150rpx;"></image>
								<view class="" style="color: #999;font-size: 28rpx;margin-top: 20rpx;">
									暂无数据
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>


		</view>
	</view>
</template>

<script>
	import {
		categorySelectList
	} from '../../api/index.js'
	export default {
		baikesousuo: '',
		name: 'baoike',
		props: {
			cur: String,
		},
		components: {},
		// components: {},
		data() {
			return {
				zlist: [],
				keyword: '',
				height: '',
				value1: 3,
				typelist: [],
				typeIndex: 0,
				uid: 0,
				questionId: '',
				dept: '',
				money: 0,
				browseNmb: 0,
				payMoney: 0,
				list: [],
				//筛选data
				hasChoose: false,
				value: '',
			};
		},
		created() {
			this.mounted()
			this.init()
		},

		methods: {
			search() {
				// let data={
				//    dept: this.dept,
				//    money: this.money,
				//    pageSize: 20,
				//    pageIndex: 1,
				//    browseNmb: this.browseNmb,
				//    payMoney: this.payMoney,
				//    keyword:this.keyword
				// }
				// getlistss(data).then(res=>{
				//     this.list = response.data.data.list
				// })
				this.getlist()
			},
			mounted() { //835
				let msg = this
				uni.getSystemInfo({
					"success"(res) {
						msg.height = res.statusBarHeight //可使用的屏幕高度
						console.log("asd", res)
					}
				})
				console.log("高度", this.height)
				// this.$store.commit("SET_HEIGHT", this.height) //将高度放进仓库,方便其他页面使用

			},
			orderbyChange(obj) {
				console.log("123321", obj);
				console.log(this)
				this.$refs.condition.visibleDrawer = true;
			},
			init() {
				categorySelectList().then(res => {
					this.zlist = res.data
					for (var i = 0; i < res.data.length; i++) {
						if (i == 0) {
							this.typeIndex = res.data[i].id
						}
						if (res.data[i].pid == this.typeIndex) {
							this.list.push(res.data[i])
						}
						if (res.data[i].pid == 0) {
							this.typelist.push(res.data[i])
						}
					}
				})
				console.log(this.list)
				// uni.request({
				// 	url: this.$store.state.http.http + 'ebDept/getList',
				// 	method: 'get',
				// 	header: {
				// 		'Content-Type': 'application/json', //自定义请求头信息
				// 		'Authori-zation': this.$store.state.app.token
				// 	},
				// 	success: (response) => {
				// 		this.typelist = response.data.data.list
				// 		this.typeIndex = this.typelist[0].id
				// 		this.dept = this.typelist[0].deptName
				// 		this.getlist()

				// 	}
				// });
			},
			// 鼠标选中改变样式
			typeItem(index, name) {
				this.typeIndex = index
				this.dept = name
				this.getlist();
				// console.log(index)
				// getclassify({
				// 	cid: index,
				// 	limit: 10,
				// 	page: 1
				// }).then(res => {
				// 	if (res.code == 200) {
				// 		//拿到list集合 赋值
				// 		console.log('res', res)
				// 		this.bookitemlist = res.data.list
				// 	}
				// })
			},
			getlist() {
				this.list = []
				console.log(this.typeIndex)
				for (var i = 0; i < this.zlist.length; i++) {
					if (this.typeIndex == this.zlist[i].pid) {
						this.list.push(this.zlist[i])
					}

				}
				console.log(this.list)
				// console.log(this.$store.state.userInfo.wxInfo.uid)
				// this.uid = this.$store.state.userInfo.wxInfo.uid
				// uni.request({
				// 	url: this.$store.state.http.http + 'user/upload/list',
				// 	method: 'get',
				// 	data: {
				// 		// uid: this.uid,
				// 		// questionId: this.questionId,
				// 		dept: this.dept,
				// 		money: this.money,
				// 		pageSize: 20,
				// 		pageIndex: 1,
				// 		browseNmb: this.browseNmb,
				// 		payMoney: this.payMoney,
				//                     keyword:this.keyword
				// 	},
				// 	header: {
				// 		'Content-Type': 'application/json', //自定义请求头信息
				// 		'Authori-zation': this.$store.state.app.token
				// 	},
				// 	success: (response) => {
				// 		console.log(response.data)
				// 		this.list = response.data.data.list

				// 	}
				// });
			},
			onClickText_18() {
				uni.navigateTo({
					url: '/pages/shangcheng/shangcheng'
				});
			},
			onClickView_14() {
				uni.navigateTo({
					url: '/pages/huaban_1_kaobei_3/huaban_1_kaobei_3'
				});
			},
			onClickView_19(id, name) {
				console.log(1111)
				uni.navigateTo({
					url: '/pages/store/categoryProducts?id=' + id + '&name=' + name
				});
			},
			onClickView_7() {
				uni.navigateTo({
					url: '/pages/huaban_1_kaobei_3/huaban_1_kaobei_3'
				});
			},
			onClickView_8() {
				uni.navigateTo({
					url: '/pages/huaban_1_kaobei_15/huaban_1_kaobei_15'
				});
			},
			onClickView_9() {
				uni.navigateTo({
					url: '/pages/huaban_9/huaban_9'
				});
			},
			onClickView_10() {
				uni.navigateTo({
					url: '/pages/huaban_1_kaobei_4/huaban_1_kaobei_4'
				});
			},
			onClickView_12() {
				uni.navigateTo({
					url: '/pages/geren/geren'
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	.topss {
		background-color: #1989E1;
	}

	.liubai {
		height: var(--status-bar-height);
		width: 100%;
	}

	.baiketitle {
		text-align: center;
		padding: 15rpx 0;
		margin-top: 20rpx;
		color: #fff;
	}

	.image_5 {
		width: 1.69rem;
		height: 1.69rem;
	}

	.page {
		background-color: #f5f5f5;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.tab-bar {
		padding: 0.16rem 1.59rem 0.47rem;
		background-color: #ffffff;
	}

	.group_1 {
		padding: 3.81rem 0 0.41rem;
		position: absolute;
		left: 0;
		right: 0;
		top: -3.81rem;
	}

	.group_2 {
		position: absolute;
		left: 0.94rem;
		top: 8.63rem;
	}

	.section_3 {
		padding: 0.84rem 0.84rem 0 0.91rem;
		background-color: #ffffff;
		width: 17.69rem;
		position: absolute;
		right: 0;
	}

	.section_10 {
		padding: 0 0.063rem;
		background-color: #ffffff;
		width: 6.69rem;
	}

	.section_12 {
		padding: 8.25rem 0.13rem 0.66rem 0.63rem;
		border-radius: 0.47rem;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62ac1d455a7e3f03100b6468/62b188edd029820011534ee0/16558146719254602873.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		left: 6.66rem;
		top: 4.94rem;
	}

	.group_6 {
		width: 2.5rem;
		height: 2.47rem;
	}

	.group_7 {
		width: 2.5rem;
		height: 2.41rem;
	}

	.group_8 {
		height: 2.44rem;
	}

	.group_9 {
		width: 2.5rem;
		height: 2.42rem;
	}

	.group_10 {
		margin-right: 0.38rem;
		margin-top: 0.094rem;
		width: 2.31rem;
		height: 2.38rem;
	}

	.section_1 {
		padding: 0.5rem 0.91rem 0.88rem;
		background-color: #ffffff;
	}

	.image_3 {
		width: 6.06rem;
		height: 10.78rem;
		position: absolute;
		right: 6.28rem;
		bottom: 0;
	}

	.text_3 {

		margin-left: 1.44rem;
		align-self: center;
		/* color: #6d79fe; */
		/* font-size: 0.75rem; */
		/* font-family: SourceHanSansCN; */
		/* font-weight: 500; */
		/* line-height: 0.72rem; */
		color: #666666;
		font-size: 0.75rem;
		font-family: SourceHanSansCN;
		line-height: 0.75rem;
	}

	.text_4 {
		margin-top: 2.41rem;
		color: #666666;
		font-size: 0.75rem;
		font-family: SourceHanSansCN;
		line-height: 0.75rem;
	}

	.text_5 {
		margin-top: 2.44rem;
		color: #666666;
		font-size: 0.75rem;
		font-family: SourceHanSansCN;
		line-height: 0.72rem;
	}

	.text_6 {
		margin-top: 2.47rem;
		color: #666666;
		font-size: 0.75rem;
		font-family: SourceHanSansCN;
		line-height: 0.72rem;
	}

	.text_7 {
		margin-top: 2.44rem;
		color: #666666;
		font-size: 0.75rem;
		font-family: SourceHanSansCN;
		line-height: 0.72rem;
	}

	.text_8 {
		margin-top: 2.41rem;
		color: #666666;
		font-size: 0.75rem;
		font-family: SourceHanSansCN;
		line-height: 0.75rem;
	}

	.text_9 {
		margin-top: 2.44rem;
		color: #666666;
		font-size: 0.75rem;
		font-family: SourceHanSansCN;
		line-height: 0.72rem;
	}

	.text_10 {
		margin-top: 2.47rem;
		color: #666666;
		font-size: 0.75rem;
		font-family: SourceHanSansCN;
		line-height: 0.72rem;
	}

	.text_11 {
		margin-top: 2.41rem;
		color: #666666;
		font-size: 0.75rem;
		font-family: SourceHanSansCN;
		line-height: 0.72rem;
	}

	.section_4 {
		padding: 8.25rem 0.063rem 0.66rem 0.69rem;
		align-self: flex-end;
		border-radius: 0.47rem;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62ac1d455a7e3f03100b6468/62b188edd029820011534ee0/16558146719251092684.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.group_3 {
		/* float: left; */
		width: 100%;
		margin-top: 0.88rem;
		display: flex;
		flex-wrap: wrap;
	}

	.group_4 {
		margin-top: 0.84rem;
	}

	.section_11 {
		background-color: #1989E1;
		width: 0.19rem;
		height: 2.88rem;
	}

	.text_23 {
		margin-left: 1.44rem;
		align-self: center;
		color: #1989E1;
		font-size: 0.75rem;
		font-family: SourceHanSansCN;
		font-weight: 500;
		line-height: 0.72rem;
	}

	.text_24 {
		color: #ffffff;
		font-size: 0.69rem;
		font-family: SourceHanSansCN;
		line-height: 0.66rem;
	}

	.text_25 {
		color: #ffffff;
		font-size: 0.69rem;
		font-family: SourceHanSansCN;
		line-height: 0.53rem;
	}

	.text_26 {
		margin-top: 0.19rem;
		color: #9dabc0;
		font-size: 0.63rem;
		font-family: SourceHanSansCN;
		line-height: 0.59rem;
	}

	.text_27 {
		margin-top: 0.13rem;
		color: #9dabc0;
		font-size: 0.63rem;
		font-family: SourceHanSansCN;
		line-height: 0.59rem;
	}

	.text_28 {
		margin-top: 0.16rem;
		color: #9dabc0;
		font-size: 0.63rem;
		font-family: SourceHanSansCN;
		line-height: 0.59rem;
	}

	.text_29 {
		margin-top: 0.14rem;
		color: #6d79fe;
		font-size: 0.63rem;
		font-family: SourceHanSansCN;
		line-height: 0.59rem;
	}

	.text_30 {
		margin-top: 0.094rem;
		color: #9dabc0;
		font-size: 0.63rem;
		font-family: SourceHanSansCN;
		line-height: 0.59rem;
	}

	.section_2 {
		flex: 1 1 auto;
		background-color: #f3f4f5;
		border-radius: 1.09rem;

	}

	.text_2 {
		margin-left: 0.69rem;
		align-self: center;
		color: #63667d;
		font-size: 0.81rem;
		font-family: SourceHanSansCN;
		line-height: 0.75rem;
	}

	.image_2 {
		margin-left: 0.19rem;
		flex-shrink: 0;
		align-self: center;
		width: 0.56rem;
		height: 0.63rem;
	}

	.text_12 {
		color: #ffffff;
		font-size: 0.69rem;
		font-family: SourceHanSansCN;
		line-height: 0.66rem;
	}

	.text_13 {
		color: #ffffff;
		font-size: 0.69rem;
		font-family: SourceHanSansCN;
		line-height: 0.53rem;
	}

	.section_5 {
		padding: 8.25rem 0.13rem 0.66rem 0.63rem;
		flex: 1 1 7.56rem;
		border-radius: 0.47rem;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62ac1d455a7e3f03100b6468/62b188edd029820011534ee0/16558146719258116920.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 9.56rem;
	}

	.section_6 {
		text-align: center;
		width: 30%;
		height: 6rem;
		margin: 0 1.5% 30rpx;
	}

	.section_7 {
		padding: 8.25rem 0.13rem 0.66rem 0.63rem;
		flex: 1 1 7.56rem;
		border-radius: 0.47rem;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62ac1d455a7e3f03100b6468/62b188edd029820011534ee0/16558146719254737505.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 9.56rem;
	}

	.section_8 {
		margin-left: 0.81rem;
		padding: 5.5rem 0.063rem 0 0.69rem;
		flex: 1 1 7.56rem;
		border-radius: 0.47rem;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62ac1d455a7e3f03100b6468/62b188edd029820011534ee0/16558146719256660459.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 9.56rem;
	}

	.search {
		margin-left: 0.91rem;
	}

	.text_14 {
		font-size: 0.69rem;
		font-family: SourceHanSansCN;
		width: 100%;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.text_15 {
		font-size: 0.69rem;
		font-family: SourceHanSansCN;
	}

	.text_16 {
		color: #ffffff;
		font-size: 0.69rem;
		font-family: SourceHanSansCN;
		line-height: 0.66rem;
	}

	.text_17 {
		color: #ffffff;
		font-size: 0.69rem;
		font-family: SourceHanSansCN;
		line-height: 0.53rem;
	}

	.text_18 {
		color: #ffffff;
		font-size: 0.69rem;
		font-family: SourceHanSansCN;
		line-height: 0.66rem;
	}

	.text_19 {
		color: #ffffff;
		font-size: 0.69rem;
		font-family: SourceHanSansCN;
		line-height: 0.53rem;
	}

	.section_9 {
		position: fixed;
		bottom: 200rpx;
		right: 4%;
		padding: 0.56rem 0 0.47rem;
		align-self: flex-end;
		filter: drop-shadow(0px 0.094rem 0.56rem #2d4ed787);
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62ac1d455a7e3f03100b6468/62b188edd029820011534ee0/16558146722551953905.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 2.81rem;
	}

	.group_5 {
		padding-bottom: 0.66rem;
	}

	.image_1 {
		flex-shrink: 0;
		width: 1rem;
		height: 0.97rem;
	}

	.text_1 {
		margin: 0.19rem 0 0.13rem 0.41rem;
		color: #b8b8b8;
		font-size: 0.69rem;
		font-family: SourceHanSansCN;
		line-height: 0.66rem;
	}

	.image_4 {
		filter: drop-shadow(0px 0.094rem 0.91rem #2536b32e);
		width: 1.06rem;
		height: 1rem;
	}

	.text_20 {
		margin-top: 0.22rem;
		color: #ffffff;
		font-size: 0.56rem;
		font-family: SourceHanSansCN;
		font-weight: 700;
		line-height: 0.56rem;
	}

	.text_21 {
		color: #ffffff;
		font-size: 0.69rem;
		font-family: SourceHanSansCN;
		line-height: 0.66rem;
	}

	.text_22 {
		color: #ffffff;
		font-size: 0.69rem;
		font-family: SourceHanSansCN;
		line-height: 0.53rem;
	}
</style>
